
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>完善资料</title>
    <link rel="stylesheet" type="text/css" href="/static/css/wanshan/lq.datetimepick.css"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
    <style>
        body {
            background: #4cb6cb;
            color: #666;
            font: 12px/150% Arial,Verdana, "microsoft yahei";
        }
        h1{
            text-align: center;
            font-size: 36px;
            color: white;
            margin-top: 5px;
        }
        div, dl, dt, dd, ol, ul, li, h2, h3, h4, h5, h6, p, blockquote, pre, button, fieldset, form, input, legend, textarea, th, td {
            margin: 0;
            padding: 0;
        }

        button,input,optgroup,select,textarea {
            margin: 0;
            font: inherit;
            color: inherit;
            outline: none;
        }

        /*#file{
            position: relative;
            left:100px;
            top:15px;
            border-radius: 5px;
            background:#2ea0b6;
        }*/

        .pc-kk-form{
            padding:60px 420px;
        }
        .pc-kk-form h1{
            margin-bottom: 10%;
        }
        .pc-kk-form-list{
            background:#fff;
            border:1px solid #e5e5e5;
            border-radius:5px;
            height:44px;
            line-height:44px;
            margin-bottom:35px;
        }
        .pc-kk-form-list input{
            width:60%;
            border:none;
            background:none;
            /*color:#9fa3a7;*/
            font-size:16px;
            height: 36px;
            padding: 4px 10px;
            text-align: center;
        }
        span{
            margin-left: 5%;
            font-size: 14px;
            /*color: #03A9F4;
            background: #FFEB3B;*/
            padding: 1%;
        }
        .pc-kk-form-list textarea{
            background:none;
            border:none;
            height:60px;
            padding:10px;
            resize:none;
            width:94%;
            line-height:22px;
            /*color:#9fa3a7;*/
            font-size:18px;
        }
        /*.pc-kk-form-list span{
            font-size: 12px;
        }
        .pc-kk-form-list #sp{
            width:200px;
              height:32px;
              line-height:32px;
              color:#999;
        }*/
        .nice-select{
            position: relative;
            background: #fff url(/static/images/sj.png) no-repeat right center;
            background-size:18px;
            width:47%;
            float:left;
            border:1px solid #e5e5e5;
            border-radius:5px;
            height:44px;
            line-height:44px;
        }
        .nice-selecter{
            position: relative;
            background-size:18px;
            width:47%;
            float:left;
            border:1px solid #e5e5e5;
            border-radius:5px;
            height:44px;
            line-height:44px;
            background: white;
        }
        .nice-select ul{
            width: 100%;
            display: none;
            position: absolute;
            left: -1px;
            top: 44px;
            overflow: hidden;
            background-color: #fff;
            max-height: 150px;
            overflow-y: auto;
            border: 1px solid #b9bcbf;
            z-index: 9999;
            border-radius:5px;

        }
        .nice-select ul li{
            padding-left:10px;
        }
        .nice-select ul li:hover{
            background:#f8f4f4;
        }
        .pc-kk-form-list-clear{
            background:none;
            border:none;
        }
        .pc-kk-form-btn button{
            background:#2ea0b6;
            color:#fff;
            border:none;
            width:100%;
            height:50px;
            line-height:50px;
            font-size:16px;
            border-radius:50px;
        }
        @media screen and (max-width: 450px){
            .nice-selecter span,span.smallwidth{
                display:none;
            }
            .pc-kk-form-list input{
                width:100%;
            }
            .mustwrite{
                background:#ffeb3b;
            }
            .tips1{
                display:none;
            }
            .tips2{
                display:block!important;
            }
        }

        @media screen and (max-width: 750px){
            .pc-kk-form{
                padding:55px 10px !important;
            }
            .datetime-arr,.datetime-time1{
                display: none !important;
                height: 0;
            }
            #lq-datetimepick{
                left: 0 !important;
                width: 95% !important;
            }

        }

        @media screen and (max-width: 1500px) and (min-width: 750px){
            .pc-kk-form{
                padding:55px 20% !important;
            }
        }


        em{font-style:normal;font-size:14px;}
        .form-group {margin:0 auto !important;}
        .form-group-txt{height:32px;line-height:32px;padding:0 10px;}
        .form-control,
        .simulation-input {
            width: 100%;
            line-height: 16px;
            font-size: 22px;
            background: none;
            outline: none;
            background-color: #fff;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            -ms-box-sizing: border-box;
            box-sizing: border-box;
            margin: 0 8px;
            transition: border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s;
        }

    </style>
    <script type="text/javascript">
        function checkform(){
            var xh=document.getElementById("xuehao").value;
            if(xh.length!=10){
                alert("学号格式不正确！");
                return false;
            }
            var ph=document.getElementById("phone").value;
            var reg1 = /^1[3|4|5|7|8][0-9]{9}$/;
            if(reg1.test(ph)==false){
                alert("请输入有效的联系方式！");
                return false;
            }
            var qq=document.getElementById("qq").value;
            var reg2=/^\d{5,10}$/;
            if(reg2.test(qq)==false){
                alert("请输入有效的QQ号码！");
                return false;
            }
            var zu=document.getElementById("zu").value;
            var sex=document.getElementById("sex").value;
            var date1=document.getElementById("datetimepicker1").value;
            var date2=document.getElementById("datetimepicker2").value;
            if(zu==""||sex==""||date1==""||date2==""){
                alert("请检查是否有未填项！")
                return false;
            }
            return true;
        }
    </script>
</head>
<body>

<div class="pc-kk-form">
    <h1>完善资料:${member.m_realname}</h1>
    <form action="/index" method="post">
        <input type="hidden" value="${member.m_id}" name="member[m_id]">
        <div class="pc-kk-form-list pc-kk-form-list-clear">
            <div class="nice-selecter mustwrite" name="nice-select">
                <span>*学号</span><input type="text" placeholder="学号" value="${member.m_studentNumber}"  title="学号" name="member[m_studentNumber]" required="required" id="xuehao" autocomplete="off">
            </div>
            <div class="nice-selecter" name="nice-select" style="float:right">
                <span>寝室号</span><input type="text" placeholder="寝室号(211#315)" title="寝室号" value="${member.m_dormitory}" name="member[m_dormitory]" required="required" autocomplete="off">
            </div>
        </div>
        <div class="pc-kk-form-list pc-kk-form-list-clear">
            <div class="nice-select mustwrite" name="nice-select">
                <input type="hidden" name="member[m_group]" id="group" value="${member.m_group}">
                <span class="smallwidth">*组别</span><input type="text" placeholder="组别" title="组别" value="${mygroup.g_gname}" required="required" name=a readonly id="zu">
                <ul>
                    #for(Group group : groups)
                    <li data-value="${group.g_id}">${group.g_gname}</li>
                    #end
                </ul>
            </div>
            <div class="nice-select mustwrite" name="nice-select" style="float:right">
                <input type="hidden" name="member[m_sex]" id="sex2" value="${member.m_sex}">
                #set(sex="男")
                #if(member.m_sex==2)
                #set(sex="女")
                #end
                <span class="smallwidth">*性别</span><input type="text" placeholder="性别" title="性别" value="${sex}" required="required" name=a readonly id="sex">
                <ul>
                    <li data-value="1">男</li>
                    <li data-value="2">女</li>
                </ul>

            </div>
        </div>
        <div class="pc-kk-form-list pc-kk-form-list-clear">
            <div class="nice-selecter mustwrite" name="nice-select">
                <table width="100%" border="0" cellpadding="0" cellspacing="0" class="table table-cell" >
                    <tbody>
                    <tr>
                        <td>
                            <div class="form-group float-left w140">
                                <span>*出生日期</span><input type="text" id="datetimepicker1" title="出生日期" placeholder="出生日期" class="form-control" value="${member.m_birthday}" name="member[m_birthday]" required="required" readonly/>
                            </div>

                        </td>
                    </tr>
                    </tbody>
                </table>
            </div>
            <div class="nice-selecter mustwrite" name="nice-select" style="float:right">
                <table width="100%" border="0" cellpadding="0" cellspacing="0" class="table table-cell">
                    <tbody>
                    <tr>
                        <td>
                            <div class="form-group float-left w140">
                                <span>*加入日期</span><input type="text" id="datetimepicker2" title="进入实验室日期" class="form-control" placeholder="进入实验室日期" value="${member.m_joindate}" name="member[m_joindate]" required="required" readonly/>
                            </div>

                        </td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
        <div class="pc-kk-form-list pc-kk-form-list-clear">
            <div class="nice-selecter mustwrite" name="nice-select">
                <span>*QQ</span><input type="text" placeholder="QQ" title="QQ" name="member[m_qq]" value="${member.m_qq}" required="required" id="qq" autocomplete="off">
            </div>
            <div class="nice-selecter mustwrite" name="nice-select" style="float:right">
                <span>*电话</span><input type="text" placeholder="联系电话" title="联系电话" value="${member.m_phone}" name="member[m_phone]" required="required" id="phone" autocomplete="off">
            </div>
        </div>
        <div class="pc-kk-form-list pc-kk-form-list-clear">
            <div class="nice-selecter" name="nice-select">
                <span>特长-1</span><input type="text" placeholder="特长-1" title="特长-1" name="skill[skillName1]" value="${skill.skillName1}" required="required" id="skillName1" autocomplete="off">
            </div>
            <div class="nice-selecter" name="nice-select" style="float:right">
                <span>介绍-1</span><input type="text" placeholder="介绍-1" title="介绍-1" value="${skill.skillContent1}" name="skill[skillContent1]" required="required" id="skillContent1" autocomplete="off">
            </div>
        </div>
        <div class="pc-kk-form-list pc-kk-form-list-clear">
            <div class="nice-selecter" name="nice-select">
                <span>特长-2</span><input type="text" placeholder="特长-2" title="特长-2" name="skill[skillName2]" value="${skill.skillName2}" required="required" id="skillName2" autocomplete="off">
            </div>
            <div class="nice-selecter" name="nice-select" style="float:right">
                <span>介绍-2</span><input type="text" placeholder="介绍-2" title="介绍-2" value="${skill.skillContent2}" name="skill[skillContent2]" required="required" id="skillContent2" autocomplete="off">
            </div>
        </div>
        <div class="pc-kk-form-list pc-kk-form-list-clear">
            <div class="nice-selecter" name="nice-select">
                <span>特长-3</span><input type="text" placeholder="特长-3" title="特长-3" name="skill[skillName3]" value="${skill.skillName3}" required="required" id="skillName3" autocomplete="off">
            </div>
            <div class="nice-selecter" name="nice-select" style="float:right">
                <span>介绍-3</span><input type="text" placeholder="介绍-3" title="介绍-3" value="${skill.skillContent3}" name="skill[skillContent3]" required="required" id="skillContent3" autocomplete="off">
            </div>
        </div>
        <div class="pc-kk-form-list pc-kk-form-list-clear">
            <div class="nice-selecter" name="nice-select">
                <span>特长-4</span><input type="text" placeholder="特长-4" title="特长-4" name="skill[skillName4]" value="${skill.skillName4}" required="required" id="skillName4" autocomplete="off">
            </div>
            <div class="nice-selecter" name="nice-select" style="float:right">
                <span>介绍-4</span><input type="text" placeholder="介绍-4" title="介绍-4" value="${skill.skillContent4}" name="skill[skillContent4]" required="required" id="skillContent4" autocomplete="off">
            </div>
        </div>
        <div class="pc-kk-form-list" style="height:auto">
            <span style="margin-left:10px;">毕业去向/打算</span><textarea placeholder="毕业去向/打算" title="毕业去向/打算" name="member[m_trace]" required="required">${member.m_trace}</textarea>
        </div>
        <div style="margin-top: -30px; margin-bottom: 30px;" class="tips1">注：标 * 项为必填项。</div>
        <div style="margin-top: -30px; margin-bottom: 30px;display:none;" class="tips2">注：黄色背景项为必填项。</div>
        <div class="pc-kk-form-btn">
            <button type="button" class="wanshan">Submit</button>
        </div>
        <div  class="pc-kk-form-btn" style="margin-top:10px;">
            <button type="button" onclick="javascript:window.history.back()">← 返回</button>
        </div>
        </form>
</div>


<script type="text/javascript" src="/static/js/wanshan/jquery.js"></script>
<script src='/static/js/wanshan/selectUi.js' type='text/javascript'></script>
<script src='/static/js/wanshan/lq.datetimepick.js' type='text/javascript'></script>

<script>
    $("button.wanshan").click(function(){
        if(checkform())
        {
            $.ajax({
                url:"/dowanshan",
                dataType:"json",
                type:"post",
                data:$("form").serialize(),
                success:function(result){
                    alert(result.tips);
                    window.location = "/";
                },
                error:function(result){
                    alert("系统繁忙！");
                 }
            });
        }
    });

    $('[name="nice-select"]').click(function(e){

        $('[name="nice-select"]').find('ul').hide();

        $(this).find('ul').show();

        e.stopPropagation();

    });

    $('[name="nice-select"] li').hover(function(e){

        $(this).toggleClass('on');

        e.stopPropagation();

    });

    $('[name="nice-select"] li').click(function(e){

        var val = $(this).text();

        var val2 = $(this).attr("data-value");

        $(this).parents('[name="nice-select"]').find('input').val(val);

         $(this).parents('[name="nice-select"]').find("input[type='hidden']").val(val2);

        $('[name="nice-select"] ul').hide();

        e.stopPropagation();

    });

    $(document).click(function(){

        $('[name="nice-select"] ul').hide();

    });

</script>


<script type="text/javascript">
    $(function (){
        $("#datetimepicker2").on("click",function(e){
            e.stopPropagation();
            $(this).lqdatetimepicker({
                css : 'datetime-day',
                dateType : 'D',
                selectback : function(){

                }
            });
        });

        $("#datetimepicker1").on("click",function(e){
            e.stopPropagation();
            $(this).lqdatetimepicker({
                css : 'datetime-day',
                dateType : 'D',
                year:1991,
                selectback : function(){

                }
            });
        });
    });
</script>
</body>
</html>